Skip to content

fix(QEditor): save selection range before execCommand('createLink') t…#18249

Merged
rstoenescu merged 2 commits intoquasarframework:devfrom
Jadu07:fix/qeditor-hyperlink-on-formatted-text
Mar 20, 2026
Merged

fix(QEditor): save selection range before execCommand('createLink') t…#18249
rstoenescu merged 2 commits intoquasarframework:devfrom
Jadu07:fix/qeditor-hyperlink-on-formatted-text

Conversation

@Jadu07
Copy link
Copy Markdown
Contributor

@Jadu07 Jadu07 commented Mar 17, 2026

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Documentation
  • Code style update
  • Refactor
  • Build-related changes
  • Other, please describe:

Does this PR introduce a breaking change?

  • Yes
  • No

The PR fulfills these requirements:

  • It's submitted to the dev branch (or v[X] branch)
  • When resolving a specific issue, it's referenced in the PR's title (e.g. fix: #xxx[,#xxx], where "xxx" is the issue number)
  • It's been tested on a Cordova (iOS, Android) app
  • It's been tested on an Electron app
  • Any necessary documentation has been added or updated in the docs or explained in the PR's description.

If adding a new feature, the PR's description includes:

  • A convincing reason for adding this feature (to avoid wasting your time, it's best to start a new feature discussion first and wait for approval before working on it)

Other information:

When selecting text with mixed formatting (e.g., **bold** plain) and applying a hyperlink via the Link toolbar button, the hyperlink was not being applied to the full selection.

Root Cause:

document.execCommand('createLink') mutates the DOM by splitting a mixed-format selection into separate <a> elements per formatting context:

<!-- Before createLink -->
<strong>34</strong> text

<!-- After createLink — browser creates two separate anchors -->
<a href="https://"><strong>34</strong></a><a href="https://"> text</a>

The selection range was saved after this mutation, so getRangeAt(0) only captured the first <a> element's range. When the user confirmed the URL, restore() reselected only that partial content, and the final createLink only updated one anchor's href.

Fix:

Move this.save(selection.getRangeAt(0)) to before document.execCommand('createLink', ...) in ui/src/components/editor/editor-caret.js, so the full original selection is preserved before the DOM is mutated.

Since createLink only re-parents existing text nodes (it doesn't create new ones), the saved range node references remain valid after the mutation. restore() then correctly reselects the full original content, and the final createLink call updates all anchor href values.

fixes #18233

Jadu07 added 2 commits March 17, 2026 23:49
…o fix hyperlink on formatted text

When selecting text with mixed formatting (e.g., bold + plain),
document.execCommand('createLink') mutates the DOM by splitting the
selection into separate <a> elements per formatting context. Previously,
the selection range was saved *after* this mutation, so only the first
<a> element's range was preserved. On 'Update', caret.restore() would
then only reselect that partial content, causing the final URL to be
applied to just one portion of the original selection.

Fix: save the range *before* calling execCommand('createLink') so the
full original selection is preserved and correctly restored when the
user confirms the URL.

Fixes #<issue-number>
@github-actions
Copy link
Copy Markdown

UI Tests Results

    1 files     98 suites   40s ⏱️
1 031 tests 1 031 ✅ 0 💤 0 ❌
1 050 runs  1 050 ✅ 0 💤 0 ❌

Results for commit 7ec2fbb.

@Jadu07
Copy link
Copy Markdown
Contributor Author

Jadu07 commented Mar 19, 2026

@rstoenescu pls review this pr

@rstoenescu rstoenescu merged commit c3a6a60 into quasarframework:dev Mar 20, 2026
3 checks passed
@rstoenescu
Copy link
Copy Markdown
Member

Thanks for contributing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Issue when apply hyperlink with strong/bold or any tag using q-editor

2 participants